
<template>
  <div class="report-page" :style="{background:show==null?'#F7F9FA':'#FFFFFF'}">
    <!-- <Tips></Tips>#F7F9FA; -->
    <div class="report-container">
      <van-list v-model="loading" :finished="finished" :finished-text="'没有更多了'" @load="onLoad" v-if="haveData">

        <div class="report-item" v-for="item in reportList" :key="item.id">
          <div class="report-header">
            <div class="report-time">{{item.createTime | dateTimeFormatter}}</div>
            <div class="report-status">{{ reportStatusInfo[item.reportStatus] || ''}}</div>
          </div>

          <div class="report-body">
            <ul class="report-info">
              <li>
                <div class="label">报备楼盘</div>
                <div class="value">{{ item.linkerName }}</div>
              </li>
              <li>
                <div class="label">报备客户</div>
                <div class="value">{{ item.clientName }}</div>
              </li>
              <li>
                <div class="label">客户电话</div>
                <div class="value">{{item.areaCode}} {{item.clientMobile}}</div>
                <a class="call-phone-icon iconfont icon-baobei_dianhua" :href="'tel:' + item.areaCode + item.clientMobile"></a>
              </li>
              <li>
                <div class="label">有效期</div>
                <div class="value">{{item.endTime | dateTimeFormatter}}</div>
              </li>
            </ul>
          </div>
        </div>

      </van-list>
      <div v-if="!haveData" class="nodata-box">
        <null :nullIcon="nullIcon" :nullcontent="nullcontent"></null>
      </div>
    </div>
    <div class="report-div-btn">
      <button class="report-btn" @click="addReport">创建报备</button>
    </div>
  </div>
</template>
<script>
import ShadowBox from 'COMP/ShadowBox'
import Null from 'COMP/Null'
import timeUtils from '@/utils/timeUtils'
import reportService from 'SERVICE/reportService'
export default {
  components: {
    Null,
    ShadowBox
  },

  data() {
    return {
      show: 1,
      item: [],
      nullIcon: require('IMG/user/no_report.png'),
      nullcontent: '您还没有任何报备信息',
      reportList: [],
      // reportStatusInfo: {
      //   '0': '待确认',
      //   '1': '报备成功',
      //   '2': '报备失败',
      //   '3': '审核中 '
      // },
      reportStatusInfo: {
        '0': '未到访',
        '1': '已到访',
        '2': '已认筹',
        '3': '已认购',
        '4': '已签约',
        '5': '已结佣',
        '6': '已放弃'
      },
      reportTimeDict: {
        arriveTime: '到访时间',
        confirmTime: '报备确认时间',
        contractTime: '签约时间',
        fillingAuditingTime: '报备审核中时间',
        fillingFailTime: '报备失败时间',
        // fillingTime: '报备时间', // 报备申请提交时间不计入最新时间判断
        followingTime: '待跟进时间',
        giveUpTime: '放弃时间',
        recognizeTime: '认筹时间',
        settledCommissionTime: '结佣时间',
        subscribedTime: '认购时间',
        waitingConfirmTime: '报备待确认时间'
      },
      reportTime: null,
      loading: false,
      finished: false,
      current: 1,
      haveData: true,
      scrollTop: 0
    }
  },
  created() {
    let data = window.sessionStorage.getItem('report')
    if (data) {
      let item = JSON.parse(data)
      this.scrollTop = item.scrollTop
      window.sessionStorage.removeItem('report')
    }
  },
  methods: {
    /**
     * 上拉加载更多
     */
    onLoad() {
      this.getReportList(this.current)
    },
    async getReportList(current) {
      const res = await reportService.reportList(current)
      if (res.records.length > 0) {
        this.reportList = this.reportList.concat(res.records)
        if (this.reportList.length > 0) {
          this.haveData = true
        } else {
          this.haveData = false
        }
        this.reportTime = this.getValues(this.reportTimeDict)
        for (var i in this.reportList) {
          let item = this.reportList[i]
          let times = []
          let selectTime = []
          for (var key in this.reportTimeDict) {
            times.push(Number(item[key]))
          }
          selectTime = this.copyArray(times)
          this.selectionSort(times)
          item.fillingTime = timeUtils.fmtDate(item.fillingTime)
          if (times[times.length - 1] > 0) {
            item.latestTime = timeUtils.fmtDate(times[times.length - 1])
          }
          item.minIndex = selectTime.indexOf(Math.max.apply(Math, selectTime))
        }

        if (res.pages === 0 || this.current === res.pages) {
          this.finished = true
        }
        this.current++
        this.loading = false
        this.$nextTick(() => {
          this.$el.querySelector('.report-container').scrollTop = this.scrollTop
        })
      } else {
        if (current == 1) {
          this.haveData = false
        }
        this.loading = false
        this.finished = true
        console.log('2dshjodjs', this.finished)
      }
    },
    // 数组的浅拷贝
    copyArray(arr) {
      var result = []
      result = arr.concat()
      return result
    },
    // 获取values
    getValues(obj) {
      var values = []
      for (var pro in obj) {
        values.push(obj[pro])
      }
      return values
    },

    // 选择排序 从低到高
    selectionSort(arr) {
      var len = arr.length
      var minIndex, temp
      for (var i = 0; i < len - 1; i++) {
        minIndex = i
        for (var j = i + 1; j < len; j++) {
          if (arr[j] < arr[minIndex]) {
            //寻找最小的数
            minIndex = j //将最小数的索引保存
          }
        }
        temp = arr[i]
        arr[i] = arr[minIndex]
        arr[minIndex] = temp
      }
      return arr
    },

    /**
     * 进入报备详情
     */
    reportInfo(item) {
      // this.$router.push(`/user/myReport/reportInfo/${id}`)
      let data = {
        scrollTop: this.$el.querySelector('.report-container').scrollTop
      }
      window.sessionStorage.setItem('report', JSON.stringify(data))
      this.$router.push({ path: '/user/myReport/reportInfo', query: item })
    },
    /**
     * 创建报备
     */
    addReport() {
      this.$store.commit('REPORT_INFO', {
        areaCode: '',
        channel: '',
        clientId: '',
        clientName: '',
        clientPhone: '',
        currentChannel: '',
        distributorId: '',
        institutionId: '',
        linkerId: '',
        linkerName: '',
        clientRemarkName: ''
      })
      console.log(this.reportAddInfo)
      this.$router.push('/user/myReport/addReport')
    },
    itemProperties() {
      //跳转到动态详情item
      // this.$router.push('/dynamics/dynamicsInfo')
      this.$dialog
        .confirm({
          title: '暂未开通楼盘',
          message: '请开通后查看楼盘详细动态',
          confirmButtonText: '去开通'
        })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  destroyed() {
    window.removeEventListener('popstate', this.goBack, false)
  },
  filters: {
    // 格式化时间
    formatDate(val) {
      let date = ''
      if (val) {
        let time = new Date(+val)
        let m = time.getMonth() + 1
        let d = time.getDate()
        let y = time.getFullYear()
        let h = time.getHours()
        let M = time.getMinutes()
        m = m < 10 ? '0' + m : m
        d = d < 10 ? '0' + d : d
        h = h < 10 ? '0' + h : h
        M = M < 10 ? '0' + M : M
        date = `${y}/${m}/${d} ${h}:${M}`
      }
      return date
    }
  }
}
</script>
<style lang="less" scoped>
.report-page {
  > .report-container {
    width: 100%;
    // margin: 16px 0;
    height: calc(100% - 60px);
    overflow: auto;
    // margin-top: 26px;
    .report-item {
      padding: 0 16px;
      margin-top: 26px;
      .report-header {
        height: 20px;
        display: flex;
        align-items: center;
      }
      .report-status {
        font-size: 14px;
        font-weight: 500;
        color: rgba(64, 81, 112, 1);
      }
      .report-time {
        flex: 1;
        font-size: 12px;
        font-weight: 500;
        color: rgba(155, 164, 180, 1);
        line-height: 17px;
        position: relative;
        padding-left: 24px;
        &::before {
          content: '';
          display: block;
          position: absolute;
          left: 0;
          top: 2px;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #9ba4b4;
        }
      }
    }
    .report-body {
      margin-top: 13px;
      margin-bottom: 34px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 3px 6px 0px rgba(58, 76, 130, 0.07), 0px 2px 17px 0px rgba(34, 47, 85, 0.05);
      border-radius: 6px;
      padding: 16px;
    }
    .report-info {
      li {
        display: flex;
        align-items: center;
        height: 20px;
        line-height: 20px;
        margin-bottom: 8px;
        font-size: 14px;
        &:last-child {
          margin-bottom: 0;
        }
        .label {
          width: 65px !important;
          text-align: right;
          font-weight: 400;
          color: rgba(155, 164, 180, 1);
        }
        .value {
          padding-left: 12px;
          font-weight: 500;
          color: rgba(19, 40, 77, 1);
        }
        .call-phone-icon {
          height: 20px;
          width: 20px;
          border-radius: 50%;
          display: block;
          color: #007ae6;
          margin-left: 8px;
        }
      }
    }
  }
  > .report-div-btn {
    width: 343px;
    height: 60px;
    bottom: 0;
    margin: 0 auto;
    background-color: #ffffff;
    > .report-btn {
      font-size: 16px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 22px;
      height: 44px;
      background: rgba(0, 122, 230, 1);
      border-radius: 6px;
      width: 100%;
      border: 0;
      margin-bottom: 19px;
    }
  }
  .nodata-box {
    .null-container {
      background-color: #fff;
    }
  }
}
</style>
